<template>
  <div style="width: 100%;height: 100%;">
    <el-backtop :bottom="60"></el-backtop>
    <el-page-header style="margin-top: 10px; margin-bottom: 10px;" @back="goBack" content="所有文章"></el-page-header>
    <div style="padding: 10px 0">
      <el-input style="width: 80%;" size="medium" placeholder="请输入标题关键字" suffix-icon="el-icon-search" v-model="title"></el-input>
      <el-button class="ml-5" size="medium" type="primary" @click="load" plain>搜索</el-button>
      <el-button class="ml-5" size="medium" type="warning" @click="reset" plain>重置</el-button>
    </div>
    <el-card style="width: 100%;margin: 0 auto;">
      <div :title="item.title" v-for="item in articles" :key="item.id" class="d2" style="height: 150px">
        <br/>
        <el-avatar shape="square"  :src="item.cover" style="float: left; width: 150px; height: 100px"></el-avatar>
        <div style="float: left;">
          <el-link @click="$router.push({name: 'Article',query:item.id})">
            <span style="margin-left: 5px; font-size: 20px">{{item.title}}</span>
          </el-link>
          <span style="font-size: 15px; display: flex; flex-direction: column; margin-top: 53px; margin-left: 5px; color: gray">{{item.author}}</span>
        </div>
        <span style="font-size: 10px; color: darkgray;float: right;">{{ item.date }}</span>
        <br/>
      </div>
      <div v-if="articles.length === 0">
        <span>暂无文章</span>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ArticleList",
  data() {
    return {
      articles: {},
      title: ""
    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      this.request.get("/information/list", {
        params: {
          title: this.title,
        }
      }).then(res => {
        console.log(res)
        this.articles = res
      })
    },
    reset(){
      this.title = ""
      this.load()
    },
    goBack(){
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>
